<template>
  <div id="home">
    <!-- 上背景 -->
    <div class="avtor">
      <div class="user_img_warp">
        <div class="backdrop" />
        <img class="image_big" :src="user.avatar" />
        <div class="avtor_logo" @click="editUserInfo">
          <img class="image_icon" :src="user.avatar" />
          <div class="user_name">
            {{ user.name }}
            <div class="edit_user">编辑资料</div>
          </div>
        </div>
      </div>
    </div>

    <div class="grid">
      <van-grid :border="false" :column-num="4">
        <van-grid-item>
          <div class="num">0</div>
          <div class="text">收藏的商品</div>
        </van-grid-item>
        <van-grid-item>
          <div class="num">0</div>
          <div class="text">收藏的店铺</div>
        </van-grid-item>
        <van-grid-item>
          <div class="num">0</div>
          <div class="text">关注的商品</div>
        </van-grid-item>
        <van-grid-item>
          <div class="num">0</div>
          <div class="text">我的足迹</div>
        </van-grid-item>
      </van-grid>
    </div>

    <div class="order">
      <van-cell title="我的订单" is-link />
      <van-grid :border="false" :column-num="4">
        <van-grid-item>
          <i class="icon iconfont icon-dingdan" />
          <div class="text">全部订单</div>
        </van-grid-item>
        <van-grid-item>
          <i class="icon iconfont icon-daifukuan" />
          <div class="text">待付款</div>
        </van-grid-item>
        <van-grid-item>
          <i class="icon iconfont icon-daishouhuo" />
          <div class="text">待收货</div>
        </van-grid-item>
        <van-grid-item>
          <i class="icon iconfont icon-tuikuan" />
          <div class="text">退款/退货</div>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="other">
      <van-cell title="收货地址管理" is-link class="text" />
      <van-cell title="联系客服" is-link class="text" />
      <van-cell title="意见反馈" is-link class="text" />
      <van-cell title="关于我们" is-link class="text" />
    </div>
    <div class="footer">
      <van-cell title="分享应用" is-link class="text" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {
        name: '小明',
        avatar:
          'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=183326193,1784969774&fm=26&gp=0.jpg'
      }
    }
  },
  methods: {
    editUserInfo() {
      this.$router.push('/user/userInfo')
    },
    toLogin() {
      this.$router.push('/login')
    }
  }
}
</script>
<style lass="less" scoped>
#home {
  padding-bottom: 4.5rem;
}
.grid {
  position: absolute;
  width: 96%;
  left: 50%;
  top: 38%;
  transform: translate(-50%);
  z-index: 500;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.4);
}
.grid .num {
  color: red;
  margin-bottom: 0.1rem;
}
.grid .text {
  color: #808080;
  font-size: 0.76rem;
  padding: 0.2rem 0;
}
.order {
  margin: 3.2rem 1rem 0 1rem;
}
.order .text {
  color: #808080;
  font-size: 0.73rem;
  padding: 0.28rem 0 0.1rem 0;
}
.van-cell {
  height: 3rem;
  border-bottom: 0.08rem solid #ccc;
}
.other {
  margin: 1rem 1rem 0 1rem;
}
.footer {
  margin: 1rem 1rem 0 1rem;
}
/* 遮罩层 */
/* .backdrop {
  background: rgba(0, 0, 0, 0.32);
  opacity: 0.45;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
} */

.user_img_warp {
  position: relative;
  background: #000;
}
.avtor {
  height: 42vh;
  overflow: hidden;
  background-color: #999;
  position: relative;
}
.image_big {
  height: 45vh;
  width: 100%;
  opacity: 0.6;
}
/* 用户头像 */
.avtor_logo {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%);
  text-align: center;
  z-index: 1000;
}
.image_icon {
  height: 6.5rem;
  width: 6.5rem;
  border-radius: 50%;
  border: #808080 solid 1px;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.6);
}
/* 用户名 */
.user_name {
  color: #fff;
  font-size: 1.2rem;
  margin-top: 0.2rem;
}
.edit_user {
  color: #fff;
  font-size: 0.8rem;
  margin-top: 0.5rem;
}
.user_name span {
  font-size: 0.8rem;
  color: #eee;
}
</style>
